Skip to main content

DateRangePicker How To's

How to's for the DateRangePicker guide.

How to Use DateRangePicker?​

How to Use DateRangePicker?​

DateRangePicker is an advanced date-range input component used to capture both a start and end date/time from the user.

Follow the steps below to add and configure it inside a form.

1. Adding the Component to the Form​

  1. Open the target form in Synergy IDE.
  2. Go to the Toolbox panel on the right side.
  3. Locate the DateRangePicker control.
  4. Drag and drop it onto the form.

2. Configuring Its Properties​

When the component is selected, two tabs appear in the property panel:

  • General (Appearance & Properties)
  • Events

From these tabs, you can configure:

  • Default date values
  • Appearance settings
  • Data binding options
  • Validation rules
  • Event triggers

3. Common Usage Scenarios​

Reporting Filters​

Example: “List records from the last 30 days.”
The user selects the start and end dates to define the range.

Employee Leave Processes​

Selecting leave start and end dates.

Reservation / Event / Task Planning​

Choosing a duration for an activity or booking.

Log & Activity Analysis​

Filtering records based on a specific time interval.

4. Tips & Recommendations​

  • Add validation to ensure the start date is not later than the end date.
  • Use DateTime mode when both date and time selection are needed.
  • Combine DateRangePicker with other filter controls for advanced reporting forms.

DateRangePicker is a powerful component that enhances user experience and supports more controlled management of business processes involving date ranges.

How to Use Client Enabled?​

What is Client Enabled?​

Client Enabled is a property that defines whether a form control is active (enabled) on the client side when the form is first loaded.
If it is set to True, the control is immediately usable by the user.
If it is set to False, the control is disabled and cannot be interacted with until a specific condition or rule activates it.

This property is especially useful for controlling the user’s interaction flow and applying dynamic behaviors using the Rule Manager.

What Does It Do?​

The property allows developers to:

  • Control when a form control becomes interactive.
  • Prevent users from entering or changing data until prerequisites are met.
  • Dynamically enable or disable controls based on user input or logic.

Example Scenario — Conditional Activation​

Scenario:
A form contains a checkbox called “I Accept Terms” and a text field called “Signature.”
The goal is to make the “Signature” field inactive until the user checks “I Accept Terms.”

Steps to Implement:​

  1. Select the “Signature” field in the form editor.

  2. In the Properties panel, find the Client Enabled field.

  3. Set the value to False — the field will now be disabled by default when the form loads.

  4. Open the Rule Manager.

  5. Add a new rule:

    Condition:

Action:

  1. Save and publish the form.

Result:​

  • When the form loads, the “Signature” field is disabled.
  • Once the user checks “I Accept Terms,” the field automatically becomes active and editable.

Behavior Summary​

Property StateDescription
TrueThe control is active and ready for user interaction when the form loads.
FalseThe control is disabled at load time and can be enabled dynamically via rules or code.

Notes & Best Practices​

  • Use the Client Enabled property to manage client-side interactivity without requiring server actions.
  • Combine it with Rule Manager to define when and how controls become active.
  • Remember: if server enablement is disabled, the client cannot enable the control even if Client Enabled is set to True.
  • By default, this property is set to True (active).

Summary​

Client Enabled improves form usability by letting developers control when and how users interact with form controls.
It is essential for creating responsive, condition-based form experiences where user actions dynamically change the form’s state.

What Is DateRangePicker?​

What Is DateRangePicker?​

DateRangePicker is a control used when a date or date–time range needs to be selected within a form.
It provides two input areas:

  • Start date/time
  • End date/time

This allows users to select a complete range using a single component.

What Is It Used For?​

DateRangePicker is preferred in scenarios such as:

  • Selecting a date range in report filters
  • Defining start–end dates in processes such as leave requests, tasks, or reservations
  • Narrowing down data intervals for logs, activity history, or performance analysis
  • Entering date ranges in calendar or event workflows

How Does It Appear on a Form?​

In the design interface:

  1. Open the Toolbox while the form is active.
  2. Drag and drop the DateRangePicker onto the form.
  3. When selected, the Property Viewer displays the General and Events tabs.

From these sections, the component's properties can be configured and events can be defined.

Features​

  • A single component providing two fields (start & end)
  • Supports date or date–time selection
  • Range validation (e.g., preventing the end date from being earlier than the start date)
  • Ideal for filtering, reporting, and workflow scenarios in forms

DateRangePicker is a key form component that improves user experience in range-based data entry.